<div class="dux-box">
    <div class="box-header">
        头像修改
    </div>
    <div class="box-content">

        <div class="dux-avatar-preview uk-clearfix" id="preview">
            <img src="{url('member/avatar/index', ['id' => $userInfo.user_id,'type' => 3])}" class="uk-border-circle preview-lg" alt="">
            <img src="{url('member/avatar/index', ['id' => $userInfo.user_id,'type' => 2])}" class="uk-border-circle preview-md" alt="">
            <img src="{url('member/avatar/index', ['id' => $userInfo.user_id,'type' => 1])}" class="uk-border-circle preview-sm" alt="">
        </div>

        <div class="avatar-btn uk-padding">
            <form class="dux-form uk-text-center" action="{url()}" method="post" data-dux="form-bind" data-advanced="false">
                <div class="js-upload uk-form-custom" >
                    <input type="file" accept="image/*" name="avatar" id="avatar" style="font-size: 1.4rem;">
                    <button class="uk-button uk-button-default" type="button" tabindex="-1">选择头像</button>
                </div>
                <button type="submit" class="uk-button uk-button-primary " >
                    保存头像
                </button>
            </form>

        </div>
    </div>

    <script>
        Do('base', function () {

            // 选择图片
            var URL = window.URL || window.webkitURL;
            var blobURL;

            $('#avatar').change(function () {
                var files = this.files;
                var file;
                if (files && files.length) {
                    file = files[0];
                    blobURL = URL.createObjectURL(file);
                    $('#preview').find('img').attr('src', blobURL);
                }
            });

        });
    </script>